<template>
  <div class="login">
    <div class="top_area">
      <img src="../../../assets/img/login_bg.jpg" alt="">
    </div>

    <div class="form_area">
      <div class="account">
        <i></i>
        <input type="text" autocapitalize="off" autocorrect="off" autocomplete="off" v-model="loginData.accountName" placeholder="请输入登录账号" ref="input" @blur="backBottom()">
      </div>
      <div class="password">
        <i></i>
        <input type="password" autocapitalize="off" autocorrect="off" autocomplete="off" v-model="loginData.accountPassword" placeholder="请输入密码" ref="input" @blur="backBottom()" style="margin-bottom: 0" >
      </div>

      <div class="forget_password" @click="forgotPassword">
        <span class="fr">忘记密码</span>
        <i class="fr"></i>
        <div class="clear"></div>
      </div>

      <!-- <div class="submit">登 录</div> -->
      <van-button @click="loginSubmit" color="#FC8332" class="submit" type="primary" size="large">登 录</van-button>


    </div>
    
  </div>
</template>



<script>
import {
  createNamespacedHelpers,
  mapMutations
} from "vuex";
let {
  mapState,
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

export default {
  name: 'login',
  data() {
    return {
      loginData: {
        accountName: '',
        accountPassword: '',
      },
      
    }
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),
    ...mapMutations([
      "updateInfo"
    ]),

    loginSubmit(formName) {
      
      let data = this.loginData;

      if(!data.accountName) {
        this.$toast.fail('请输入账号');
        return false;
      }
      if(!data.accountPassword) {
        this.$toast.fail('请输入密码');
        return false;
      }

      this.post({
        API: 'login',
        data: data
      }).then(res => {
        this.$notify({ type: 'success', message: '登录成功',duration: 1200 });
        sessionStorage.setItem('jwtAuth', res.jwtAuth);
        sessionStorage.setItem('author_token', res.author_token);

        this.$router.replace({
          name: 'workBench',
        })
      }).catch(err => {
        this.$toast.fail(err)
      })
      
    },

    forgotPassword() {
      this.$dialog.alert({
        message: '请联系管理员找回密码\n邮箱 : zhangjun@banmagongxue.com'
      }).then(() => {
        // on close
      });
    },

    backBottom() {
      window.scrollTo(0, document.documentElement.clientHeight); 
    }
  }

}
</script> 


<style scoped>

.login {
  width: 100%;
  height: 100%;
}

.login .top_area img {
  width: 100%;
}

.login .form_area {
  margin-top: .2rem;
}

.login .form_area{
  padding: 0 1.306667rem;
  box-sizing: border-box;
  text-align: center;
}
.login .form_area > div,
input
{
  width: 100%;
}

.login input {
  display: inherit;
  border: none;
  border-bottom: 1px solid #FC8434;
  margin-bottom: 1.333333rem;
  text-align: center;
  font-size: .426667rem;
  padding-bottom: .306667rem;
  border-radius: 0;
}

.login .form_area > div{
  position: relative;
}
.login .account i {
  position: absolute;
  left: 0;
  top: 0;
  width: .506667rem;
  height: .586667rem;
  background: url('../../../assets/img/account.png') 0 0 no-repeat;
  background-size: 100%;
}
.login .password i {
  position: absolute;
  left: 0;
  top: 0;
  width: .493333rem;
  height: .586667rem;
  background: url('../../../assets/img/password.png') 0 0 no-repeat;
  background-size: 100%;
}

.login .forget_password {
  text-align: right;
  margin-top: .266667rem;
}
.login .forget_password i {
  width: 16px;
  height: 16px;
  background: url('../../../assets/img/forget_password.png') 0 0 no-repeat;
  background-size: 100%;
}
.login .forget_password span {
  line-height: 16px;
  font-size: 14px;
  margin-left: 4px;
  color: #d2d2d2;
}

.login .submit {
  text-align: center;
  width: 7.16rem;
  height: 1.173333rem;
  line-height: 1.173333rem;
  border-radius: .173333rem;
  background: #FC8332;
  color: #fff;
  font-size: .426667rem;
  /* margin-top: 1.066667rem; */
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  margin: 1.066667rem auto;
}
.login .submit:active {
  background: #e77529;
}





</style>